<!DOCTYPE html>
<html id="htmlNode">
	<head id="headNode">
		<meta charset="utf-8">
		<title>id以及div属性</title>
	</head>
	<body id="bodyNode">
		<!-- JavaScript对form表单中的元素进行增删查改，需要用到html中某个标签的节点对象，这里就是靠知道id从而获取到节点对象的 -->
		<form id="formNode" action="http://localhost:8080/oa/sava">
			username <input id="username" type="text" name="username"/> <br>
			password <input id="password" type="password" name="passwd"/> <br>
			<input id="buttonNode" type="submit" value="sava">
		</form>
		
		
		<!-- 
			div是图层，也可以叫做盒子，使用div布局页面，会比table更灵活方便
			span也可以看成盒子。
			区别：div默认独占一行，span不会独占一行。
			div元素可以嵌套
		 -->
		 
		 <hr>
		 <div id="div1">div盒子</div>
		 <span id="span1">span盒子</span> hello world
		 
		 <div id="div">
			 我是第一层div
			<div id="div2">
				我是第二层div
				<div id="div3">我是第三层div</div>
			</div>
		 </div>
	</body>
</html>